<template>
  <view>
    <view class="title-nav">
      <uni-icons @click="back" type="left" size="24" color="white"></uni-icons>
      <text>体检卡</text>
      <text style="font-size: 26rpx" @click="addTJcard">添加</text>
    </view>
    <view class="box" v-if="userBugInfo.length">
      <scroll-view
        class="scrollY padding20"
        scroll-y="true"
        scroll-with-animation="true"
        @scrolltolower="scrolltolowerFnc"
      >
        <view
          class="record mb15 padding20"
          v-for="item in userBugInfo"
          @click="recordItemClick(item)"
        >
          <view class="rcord-left">
            <view class="name">
              {{ item.name }}
            </view>
            <view class="order-num"> 本卡服务有效期至{{ item.endTime }} </view>
            <view class="date">卡号{{ item.cardNo }} </view>
          </view>
          <view class="rcord-right">
            <view class="label" :style="statuChange(item).style">
              {{ statuChange(item).title }}
            </view>
            <text></text>
            <view class="price">
              体检次数：{{ item.useNum || 0 }}/{{ item.num || 0 }}
            </view>
          </view>
        </view>
        <view v-if="noData" style="text-align: center; color: #aaa">
          没有更多数据了
        </view>
      </scroll-view>
    </view>
    <view class="noneData" v-else>
      <image src="/static/images/noneData.png" mode="widthFix" />
      <text>暂无数据</text>
    </view>
  </view>
</template>

<script>
import moment from "moment";
import { selectUserCard } from "@/api/trading.js";

export default {
  data() {
    return {
      userBugInfo: [],
      params: {
        pageNo: 1,
        pageSize: 10,
      },
      noData: false,
    };
  },
  onShow() {
    this.userBugInfo = [];
    this.requestJybbusinessorderList();
  },
  methods: {
    statuChange(item) {
      const _o = {
        title: "可用",
        style: "color:green",
      };
      if (Number(item.useNum) >= item.num) {
        _o.title = "已用完";
        _o.style = "color:#aaa";
      }
      if (moment(item.endTime).diff(moment(), "days") < 1) {
        _o.title = "已过期";
        _o.style = "color:#aaa";
      }
      return _o;
    },
    back() {
      uni.navigateBack();
    },
    addTJcard() {
      uni.navigateTo({
        url: "/pages/addTJcard/addTJcard",
      });
    },
    scrolltolowerFnc() {
      if (this.noData) return;
      this.requestJybbusinessorderList();
    },
    recordItemClick(record) {
      uni.navigateTo({
        url: `/pages/tjCardDese/tjCardDese?id=${record.id}`,
      });
    },

    requestJybbusinessorderList() {
      uni.showLoading({
        title: "正在加载",
      });
      const params = this.params;
      selectUserCard(params)
        .then((res) => {
          const _list = res.result || [];
          this.noData = _list.length < this.params.pageSize;
          this.params.pageNo++;
          this.userBugInfo = [...this.userBugInfo, ..._list];
          uni.hideLoading();
        })
        .catch((res) => {
          this.$util.Tips({
            title: res,
          });
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../../static/css/gstyle.scss");

.box {
  .scrollY {
    height: calc(100vh - 44px);
  }
}

.record {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  box-shadow: $box-shadow;
  border-radius: $uni-border-radius-lg;
  background: #f4fdff;
  height: 220rpx;

  .rcord-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .name {
      font-size: 30rpx;
      color: #333333;
    }

    .order-num,
    .date {
      font-size: 22rpx;
      color: #818181;
    }

    .order-num {
      margin: 20rpx 0;
    }
  }

  .rcord-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    height: 100%;

    .label {
      flex: 1;
      font-size: 26rpx;
      color: rgb(17, 204, 17);
      font-weight: bold;
    }
  }
}
</style>
